<!DOCTYPE html><!--搜索商品界面-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/mainHeader::main_header('搜索商品')">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="mainContainer sixteen container">
    <div th:replace="common/HeaderBlock::block"></div>
    <div class="header-wrapper">
        <header class="container">
            <div class="head-right">
                <section class="header-bottom">
                    <div class="search-block">
                        <input type="text" placeholder="搜索商品" id="name1"/>
                        <input type="submit" value="搜索" title="搜索商品" id="mySearch"/>
                    </div>
                </section>
            </div>
        </header>
    </div>
    <!--Content Block-->
    <section class="content-wrapper">
        <div class="content-container container">
            <div class="heading-block">
                <h1>搜索得到的商品</h1>
            </div>
            <div class="new-product-block" id="myList">
                <ul class="product-grid" id="search1">

                </ul>
                <ul class="product-grid" id="search2">

                </ul>
                <div class="pager" id="proPage" style="text-align: center">

                </div>
            </div>
        </div>
    </section>
    <div th:replace="common/footer::footer"></div>
</div>
</body>
<script>
    function searchPro(num, name) {
        $.ajax({
            type: 'GET',
            url: 'pro/search',
            data: {
                'num': num,
                'name': name
            },
            success: function (result) {
                const data = result.data;
                const arr = data.list;
                $('#search1').empty();
                $('#search2').empty();
                myAppend('search1', arr);
                if (arr.length > 4) {
                    myAppend('search2', arr.slice(4));
                }
                appendPage(num, 'proPage', data, name)
            }
        })
    }

    //对指定id的标签插入arr的内容
    function myAppend(name, arr) {
        let flag;
        if (arr.length >= 4) {
            flag = 4;
        } else {
            flag = arr.length;
        }
        for (let i = 0; i < flag; i++) {
            $("#" + name).append("<li>\n" +
                "<div class='pro-img'>\n" +
                "<img title='最新商品' alt='最新商品' src='\image\\" + arr[i].mainImage + "'/>\n" +
                "</div>\n" +
                "<div class='pro-content'>\n" +
                "<p>" + arr[i].name + "</p>\n" +
                "</div>\n" +
                "<div class='pro-price'>" + '￥' + arr[i].price + "</div>\n" +
                "<div class='pro-btn-block'>\n" +
                "<a class='add-cart left' onclick='addCartPro(" + arr[i].id + ")' title='Add to Cart'>添加购物车</a>\n" +
                "<a class='add-cart right quickCart inline'\n" +
                "onclick=\"xadmin.open('详情','detail?id=" + arr[i].id + "')\" title='快速查看'>快速查看</a>\n" +
                "</div>\n" +
                "<div class='pro-link-block'>\n" +
                "<div class='clearfix'></div>\n" +
                "</div>\n" +
                "</li>")
        }
    }

    //对指定id标签插入data内容分页
    function appendPage(num, name, data, seaName) {
        const div = $('#' + name);
        div.empty();
        if (data.isFirstPage) {
            div.append("<button disabled style='color: red'>首页</button>")
        } else {
            div.append("<button onclick=\"searchPro(1,\'" + seaName + "\')\">首页</button>");
        }
        if (num === 1) {
            div.append("<button disabled style='color: red'>上一页</button>")
        } else {
            let n = num - 1;
            div.append("<button onclick=\"searchPro(" + n + ",'" + seaName + "')\">上一页</button>")
        }
        const arr = data.navigatepageNums;
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] === num) {
                div.append("<button disabled style='color: red'>" + arr[i] + "</button>")
            } else {
                div.append("<button onclick=\"searchPro(" + arr[i] + ",'" + seaName + "')\">" + arr[i] + "</button>")
            }
        }
        if (data.isLastPage) {
            div.append("<button disabled style='color: red'>下一页</button>")
        } else {
            let n = num + 1;
            div.append("<button onclick=\"searchPro(" + n + ",'" + seaName + "')\">下一页</button>")
        }
        if (data.isLastPage) {
            div.append("<button disabled style='color: red'>尾页</button>")
        } else {
            div.append("<button onclick=\"searchPro(" + data.navigateLastPage + ",'" + seaName + "')\">尾页</button>")
        }
    }

    searchPro(1, "");

    //搜索框点击事件
    $('#mySearch').click(function () {
        searchPro(1, $('#name1').val());
    });
</script>
<script>
    const ulBody = $('#ulBody');
    //先找到根类别
    $.ajax({
        type: 'GET',
        url: 'cate/listCate',
        async: false,
        success: function (result) {
            const data = result.data;//根分类
            for (let i = 0; i < data.length; i++) {
                const li1 = $('<li><a>' + data[i].name + '</a></li>');
                const ul1 = $('<ul></ul>');
                //由根分类id查找二级分类
                $.ajax({
                    type: 'GET',
                    url: 'cate/moreCate',
                    async: false,
                    data: {
                        'id': data[i].id
                    },
                    success: function (result1) {
                        const data1 = result1.data;//二级分类
                        for (let j = 0; j < data1.length; j++) {
                            ul1.append("<li><a href='product?id=" + data1[j].id + "'>" + data1[j].name + "</a></li>")
                        }
                    }
                });
                li1.append(ul1);
                ulBody.append(li1);
            }
        }
    });
</script>
</html>